<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:composite="http://java.sun.com/jsf/composite">

    <composite:interface>

        <composite:attribute name="enabledDisabled"/>
        <composite:attribute name="codeDisabled"/>
        <composite:attribute name="categoryDisabled"/>    
        <composite:attribute name="nameDisabled"/>
        <composite:attribute name="priceDisabled"/>
        <composite:attribute name="descriptionDisabled"/>
        <composite:attribute name="weightDisabled"/>
        <composite:attribute name="heightDisabled"/>
        <composite:attribute name="widthDisabled"/>
        <composite:attribute name="lengthDisabled"/>    
        <composite:attribute name="tagsDisabled"/>
        <composite:attribute name="colorListDisabled"/>    
        <composite:attribute name="imageUploadDisabled"/>    
        <composite:attribute name="imageDeleteButtonDisabled"/> 

        <composite:attribute name="codeRequired"/>
        <composite:attribute name="categoryRequired"/>    
        <composite:attribute name="nameRequired"/>
        <composite:attribute name="priceRequired"/>

        <composite:attribute name="priceRendered"/>
        <composite:attribute name="priceSearchRendered"/>
        <composite:attribute name="priceLastUpdatedRendered"/>
        <composite:attribute name="priceLastUpdatedSearchRendered"/>
        <composite:attribute name="weightRendered"/>
        <composite:attribute name="weightSearchRendered"/>
        <composite:attribute name="heightRendered"/>
        <composite:attribute name="heightSearchRendered"/>  
        <composite:attribute name="widthRendered"/>
        <composite:attribute name="widthSearchRendered"/> 
        <composite:attribute name="lengthRendered"/>
        <composite:attribute name="lengthSearchRendered"/>      
        <composite:attribute name="imageAndColorListRendered"/>    
        <composite:attribute name="imageDeleteButtonRendered"/>
        <composite:attribute name="imageUploadRendered"/> 
        <composite:attribute name="tagsCounterRendered"/>

    </composite:interface>

    <p:tabView effect="fade">

        <p:tab title="#{bundle.Product}">

            <h:panelGrid columns="3"
                         columnClasses="columnWidth48, columnWidth4, columnWidth48"
                         width="90%"
                         style="margin-left: auto; margin-right: auto">

                <h:panelGrid columns="1"
                             columnClasses="columnWidth100"
                             rowClasses="rowAlign"
                             width="100%">

                    <p:outputLabel value="#{bundle.Code}" 
                                   for="code"/>

                    <p:inputText id="code" 
                                 style="width: 100%; margin-bottom: 2%"
                                 value="#{productController.selected.code}"
                                 tabindex="01"
                                 disabled="#{cc.attrs.codeDisabled}"
                                 required="#{cc.attrs.codeRequired}"/>

                    <p:outputLabel value="#{bundle.Name}" 
                                   for="name"/>

                    <p:inputText id="name" 
                                 style="width: 100%; margin-bottom: 2%"
                                 value="#{productController.selected.name}"
                                 tabindex="03"
                                 disabled="#{cc.attrs.nameDisabled}"
                                 required="#{cc.attrs.nameRequired}"/> 

                    <p:outputLabel value="#{bundle.Price}"
                                   for="price"/>

                    <p:inputText id="price" 
                                 style="width: 100%"
                                 value="#{productController.selected.price}"
                                 tabindex="05"
                                 disabled="#{cc.attrs.priceDisabled}"
                                 required="#{cc.attrs.priceRequired}"
                                 rendered="#{cc.attrs.priceRendered}">

                        <f:convertNumber pattern="#,##0.00"
                                         locale="#{localizationUtil.selected}"/>

                    </p:inputText>

                    <p:inputText id="priceSearch"
                                 style="width: 100%"
                                 value="#{productController.priceSearch}"
                                 tabindex="05"
                                 rendered="#{cc.attrs.priceSearchRendered}"/>


                </h:panelGrid>

                <p:spacer/>

                <h:panelGrid columns="1"
                             columnClasses="columnWidth100"
                             rowClasses="rowAlign"
                             width="100%">

                    <p:outputLabel value="#{bundle.Category}"
                                   for="category"/>

                    <p:selectOneMenu id="category" 
                                     style="width: 100%; margin-bottom: 1.2%"                          
                                     value="#{productController.selected.category}"
                                     tabindex="02"
                                     converter="categoryConverter"
                                     effect="fade"
                                     filter="true"
                                     filterMatchMode="contains"
                                     disabled="#{cc.attrs.categoryDisabled}"
                                     required="#{cc.attrs.categoryRequired}">

                        <f:selectItem itemLabel="#{productController.selected.category.nameWithDisabledFormatting}"
                                      itemValue="#{productController.selected.category}"/>

                        <f:selectItems value="#{productController.selectCategory}"
                                       var="item"
                                       itemLabel="#{item.label}"
                                       itemValue="#{item}"/>

                    </p:selectOneMenu>

                    <p:outputLabel value="#{bundle.Description}" 
                                   for="description"/>

                    <p:inputText id="description" 
                                 style="width: 100%; margin-bottom: 2%"
                                 value="#{productController.selected.description}"
                                 tabindex="04"
                                 disabled="#{cc.attrs.descriptionDisabled}"/>  

                    <p:outputLabel value="#{bundle.PriceLastUpdated}"
                                   for="priceLastUpdated"/>

                    <p:inputText id="priceLastUpdated"
                                 style="width: 100%"
                                 value="#{productController.selected.priceLastUpdated}"
                                 disabled="true"
                                 rendered="#{cc.attrs.priceLastUpdatedRendered}">

                        <f:convertDateTime 
                            locale="#{localizationUtil.selected}" 
                            type="both"
                            pattern="#{localizationUtil.dateTimeFormatMediumPattern}" 
                            timeZone="#{localizationUtil.defaultTimeZone}"/>

                    </p:inputText> 

                    <p:inputText id="priceLastUpdatedSearch"
                                 style="width: 100%"
                                 value="#{productController.priceLastUpdatedSearch}"
                                 tabindex="06"
                                 rendered="#{cc.attrs.priceLastUpdatedSearchRendered}"/>          

                </h:panelGrid>        

            </h:panelGrid>

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         width="90%"
                         style="margin-left: auto; margin-right: auto">

                <p:outputLabel value="#{bundle.Tags}" 
                               for="tags"/>

                <p:inputTextarea id="tags"
                                 style="width: 100%"
                                 value="#{productController.selected.tags}"
                                 tabindex="07"
                                 maxlength="256"
                                 counterTemplate="#{bundle.RemainingCharacters}: {0}"
                                 counter="tagsCounter"                         
                                 disabled="#{cc.attrs.tagsDisabled}"/>   

                <p:outputLabel id="tagsCounter"
                               style="font-size: small"
                               rendered="#{cc.attrs.tagsCounterRendered}"/>        

            </h:panelGrid>      

        </p:tab>

        <p:tab title="#{bundle.Dimension}">

            <h:panelGrid columns="3"
                         columnClasses="columnWidth48, columnWidth4, columnWidth48"
                         width="90%"
                         style="margin-left: auto; margin-right: auto">

                <h:panelGrid columns="1"
                             columnClasses="columnWidth100"
                             rowClasses="rowAlign"
                             width="100%">

                    <p:outputLabel value="#{bundle.Weight}"
                                   for="weight"/>

                    <p:inputText id="weight" 
                                 style="width: 100%; margin-bottom: 2%"
                                 value="#{productController.selected.weight}"
                                 tabindex="08"
                                 disabled="#{cc.attrs.weightDisabled}"
                                 rendered="#{cc.attrs.weightRendered}">

                        <f:convertNumber pattern="#,##0.00"
                                         locale="#{localizationUtil.selected}"/>

                    </p:inputText> 

                    <p:inputText id="weightSearch" 
                                 style="width: 100%; margin-bottom: 2%"
                                 value="#{productController.weightSearch}"
                                 tabindex="08"
                                 rendered="#{cc.attrs.weightSearchRendered}"/>          

                    <p:outputLabel value="#{bundle.Width}"
                                   for="width"/>

                    <p:inputText id="width" 
                                 style="width: 100%"
                                 value="#{productController.selected.width}"
                                 tabindex="10"
                                 disabled="#{cc.attrs.widthDisabled}"
                                 rendered="#{cc.attrs.widthRendered}">

                        <f:convertNumber pattern="#,##0.00"
                                         locale="#{localizationUtil.selected}"/>

                    </p:inputText>

                    <p:inputText id="widthSearch" 
                                 style="width: 100%"
                                 value="#{productController.widthSearch}"
                                 tabindex="10"
                                 rendered="#{cc.attrs.widthSearchRendered}"/>          

                </h:panelGrid>   

                <p:spacer/>

                <h:panelGrid columns="1"
                             columnClasses="columnWidth100"
                             rowClasses="rowAlign"
                             width="100%">

                    <p:outputLabel value="#{bundle.Height}"
                                   for="height"/>

                    <p:inputText id="height" 
                                 style="width: 100%; margin-bottom: 2%"
                                 value="#{productController.selected.height}"
                                 tabindex="09"
                                 disabled="#{cc.attrs.heightDisabled}"
                                 rendered="#{cc.attrs.heightRendered}">

                        <f:convertNumber pattern="#,##0.00"
                                         locale="#{localizationUtil.selected}"/>

                    </p:inputText>

                    <p:inputText id="heightSearch" 
                                 style="width: 100%; margin-bottom: 2%"
                                 value="#{productController.heightSearch}"
                                 tabindex="09"
                                 rendered="#{cc.attrs.heightSearchRendered}"/>          

                    <p:outputLabel value="#{bundle.Length}"
                                   for="length"/>

                    <p:inputText id="length" 
                                 style="width: 100%"
                                 value="#{productController.selected.length}"
                                 tabindex="11"
                                 disabled="#{cc.attrs.lengthDisabled}"
                                 rendered="#{cc.attrs.lengthRendered}">

                        <f:convertNumber pattern="#,##0.00"
                                         locale="#{localizationUtil.selected}"/>

                    </p:inputText> 

                    <p:inputText id="lengthSearch" 
                                 style="width: 100%"
                                 value="#{productController.lengthSearch}"
                                 tabindex="11"
                                 rendered="#{cc.attrs.lengthSearchRendered}"/>          

                </h:panelGrid>         

            </h:panelGrid>       

        </p:tab>

        <p:tab title="#{bundle.Image} - #{bundle.Color}"
               rendered="#{cc.attrs.imageAndColorListRendered}">

            <h:panelGrid columns="3"
                         columnClasses="columnWidth48, columnWidth4, columnWidth48"
                         width="90%"
                         style="margin-left: auto; margin-right: auto">

                <h:panelGrid columns="1"
                             columnClasses="columnWidth100"
                             rowClasses="rowAlign"
                             width="100%">

                    <p:outputLabel value="#{bundle.Image}"
                                   for="image"/>

                    <p:fieldset style="width: 94%; height: 122px; text-align: center; 
                                margin-left: auto; margin-right: auto">

                        <p:graphicImage id="image"
                                        onclick="PF('imageDialog').show()"
                                        styleClass="current_image"
                                        style="width: auto; height: auto;
                                        max-width: 200px; max-height: 100px"
                                        value="#{productController.image}"
                                        cache="false"/>

                    </p:fieldset>

                    <p:commandButton id="imageDeleteButton"
                                     style="width: 100%"
                                     value="#{bundle.Delete}"
                                     tabindex="13"
                                     action="#{productController.imageDestroy}"
                                     onclick="imageDestroy();"
                                     update=":messages, image, zoomImage, imageUpload, colorImage"
                                     immediate="true"
                                     disabled="#{cc.attrs.imageDeleteButtonDisabled}"
                                     rendered="#{cc.attrs.imageDeleteButtonRendered}"/> 

                </h:panelGrid>

                <p:spacer/>

                <h:panelGrid columns="1"
                             columnClasses="columnWidth100"
                             rowClasses="rowAlign"
                             width="100%">

                    <p:outputLabel value="#{bundle.Colors}"
                                   for="productColorList"/>                  

                    <p:selectManyMenu id="productColorList" 
                                      style="width: 94%; height: 140px"
                                      value="#{productController.selected.colorList}"
                                      tabindex="12"
                                      var="color"
                                      converter="colorConverter"
                                      disabled="#{cc.attrs.colorListDisabled}">

                        <f:selectItems value="#{productController.selectColors}"
                                       var="item"
                                       itemLabel="#{item.label}"
                                       itemValue="#{item}"/>             

                        <p:column>

                            <p:graphicImage id="colorImage"
                                            value="#{colorController.image}"
                                            style="width: auto; height: auto;
                                            max-width: 40px; max-height: 40px" 
                                            cache="false"
                                            rendered="#{color.imageNotNull}">

                                <f:param name="colorId" 
                                         value="#{color.id}"/>

                            </p:graphicImage>   

                            #{color.nameWithDisabledFormatting}

                        </p:column>          

                    </p:selectManyMenu>  

                </h:panelGrid>    

            </h:panelGrid>  

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         width="90%"
                         style="margin-left: auto; margin-right: auto">

                <p:fileUpload id="imageUpload"
                              style="width: 100%; max-width: 100%"
                              fileUploadListener="#{productController.imageUpload}" 
                              mode="advanced" 
                              dragDropSupport="true"
                              label="#{bundle.Choose}"
                              uploadLabel="#{bundle.Upload}"
                              cancelLabel="#{bundle.Cancel}"
                              allowTypes="/(\.|\/)(jpe?g|png)$/"
                              invalidFileMessage="#{bundle.InvalidFileType}"
                              sizeLimit="524288"
                              invalidSizeMessage="#{bundle.InvalidFileSize}"
                              fileLimit="1"
                              fileLimitMessage="#{bundle.MaximumNumberOfFilesExceeded}"
                              previewWidth="40"
                              update=":messages, image, zoomImage, imageUpload, colorImage"
                              disabled="#{cc.attrs.imageUploadDisabled}"
                              rendered="#{cc.attrs.imageUploadRendered}"/>    

            </h:panelGrid>

            <p:dialog header="#{bundle.Image}"
                      widgetVar="imageDialog"
                      resizable="false"
                      modal="true"
                      showEffect="fade"
                      hideEffect="fade"
                      width="48%"
                      style="margin-left: auto; margin-right: auto;
                      text-align: center">

                <p:graphicImage id="zoomImage"
                                style="max-width: 90%; max-height: 90%"
                                value="#{productController.image}"
                                cache="false"/> 

            </p:dialog>       

        </p:tab>

    </p:tabView>  

    <p:dialog header="#{bundle.AdditionalInfo}"
              widgetVar="additionalInfoDialog" 
              resizable="false" 
              modal="true" 
              showEffect="fade"
              hideEffect="fade" 
              draggable="false"
              width="48%"
              style="margin-left: auto; margin-right: auto">

        <h:panelGrid columns="3"
                     columnClasses="columnWidth48, columnWidth4, columnWidth48"
                     width="90%"
                     style="margin-left: auto; margin-right: auto">

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         rowClasses="rowAlign"
                         width="100%">

                <p:outputLabel value="#{bundle.Id}" 
                               for="id"/>

                <p:inputText id="id" 
                             style="width: 100%; margin-bottom: 2%"
                             value="#{productController.selected.id}"
                             disabled="true"/>         

                <p:outputLabel value="#{bundle.CreatedBy}" 
                               for="createdBy"/>

                <p:inputText id="createdBy" 
                             style="width: 100%; margin-bottom: 2%"
                             value="#{productController.selected.createdBy.name}"
                             disabled="true"/>

                <p:outputLabel value="#{bundle.UpdatedBy}" 
                               for="updatedBy"/>

                <p:inputText id="updatedBy"   
                             style="width: 100%"
                             value="#{productController.selected.updatedBy.name}"
                             disabled="true"/>         

            </h:panelGrid>

            <p:spacer/>

            <h:panelGrid columns="1"
                         columnClasses="columnWidth100"
                         rowClasses="rowAlign"
                         width="100%">

                <p:outputLabel value="#{bundle.Enabled}" 
                               for="enabled"/>

                <p:selectBooleanCheckbox id="enabled"
                                         style="vertical-align: -22%; margin-bottom: 4%"
                                         value="#{productController.selected.enabled}"
                                         disabled="#{cc.attrs.enabledDisabled}"/>         

                <p:outputLabel value="#{bundle.Created}" 
                               for="created"/>

                <p:inputText id="created"
                             style="width: 100%; margin-bottom: 2%"
                             value="#{productController.selected.created}"
                             disabled="true">

                    <f:convertDateTime 
                        locale="#{localizationUtil.selected}" 
                        type="both"
                        pattern="#{localizationUtil.dateTimeFormatMediumPattern}" 
                        timeZone="#{localizationUtil.defaultTimeZone}"/>      

                </p:inputText>  

                <p:outputLabel value="#{bundle.Updated}" 
                               for="updated"/>

                <p:inputText id="updated"
                             style="width: 100%"
                             value="#{productController.selected.updated}"
                             disabled="true">

                    <f:convertDateTime 
                        locale="#{localizationUtil.selected}" 
                        type="both"
                        pattern="#{localizationUtil.dateTimeFormatMediumPattern}" 
                        timeZone="#{localizationUtil.defaultTimeZone}"/>

                </p:inputText>         

            </h:panelGrid>    

        </h:panelGrid>

    </p:dialog>

</html>